<script setup>

const urlHome = useUrl();
const username = useCookie('username');
const fio_short = useCookie('fio_short');
const dolzh = useCookie('dolzh');
const groups = useCookie('groups');

useHead({
	title: 'HLS: Авторизация',
})
definePageMeta({
	layout: "flat",
})

const user = ref('');
const password = ref('');

async function submit() {

	let formData = new FormData();
	formData.append('username', user.value.toLowerCase());
	formData.append('password', password.value);

	const response = await $fetch(`${urlHome.value}orders/login/`, {
		method: 'POST',
		body: formData,
	})
	console.log(response);
	if (response) {
		username.value = response.username;
		fio_short.value = response.fio_short;
		dolzh.value = response.dolzh;
		groups.value = response.groups;
		console.log("success");
		navigateTo('/menu');
	}
}

const colorMode = useColorMode()
colorMode.preference = "light"

</script>

<template>
	<div>

		<ClientOnly>
			<template #fallback>
				<div class="w-8 h-8" />
			</template>
		</ClientOnly>
		<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
			<div class="w-full max-w-md space-y-8">
				<div>
					<h1 class="mt-6 text-center text-3xl font-bold tracking-tight">Пищеблок
					</h1>
					<p class="mt-2 text-center text-sm"></p>
				</div>
				<input type="hidden" name="remember" value="true" />
				<div class="-space-y-px rounded-md shadow-sm">
					<div>
						<UInput v-model="user" id="username" name="username" autocomplete="true" type="text"
							label="Логин" required
							class="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
							placeholder="Пользователь" />
					</div>
					<div>
						<UInput @keypress.enter="submit" v-model="password" id="password" name="password"
							type="password" label="Пароль" autocomplete="current-password" required
							class="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
							placeholder="Пароль" />
					</div>
				</div>

				<div>
					<UButton @click="submit" color="primary"
						class="group relative flex w-full justify-center rounded-md border border-transparent  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
						type="button" label="Войти">
						<span class="absolute inset-y-0 left-0 flex items-center pl-3">
						</span>
						Войти
					</UButton>
				</div>
			</div>
		</div>
	</div>
</template>